<template>
  <Nav class="nav" />
  <Swiper class="swiper" />
  <div class="bg">
    <div class="ttitle">
      <span class="tgongsi">公司情况</span>
      <span class="engs">COMPANY SITUATION</span>
    </div>
    <Intro class="intro" />
    <div class="ttitle1">
      <span class="tgongsi">“探艾宝”AI</span>
      <span class="engs">ARTIFICIAL INTELLIGENCE</span>
    </div>
    <Tanaibao class="tab" />
    <div class="ttitle1 t2">
      <span class="tgongsi">合作伙伴</span>
      <span class="engs">ARTIFICIAL INTELLIGENCE</span>
    </div>
  </div>
  <Footer class="footer" />
</template>

<script lang="ts">
import { onMounted } from "@vue/runtime-core";
import Nav from "../components/nav.vue";
import Swiper from "../components/Swiper.vue";
import Intro from "../components/intro.vue";
import Tanaibao from "../components/tanaibao.vue";
import Footer from "../components/footer.vue";
export default {
  setup() {},
  components: {
    Nav,
    Swiper,
    Intro,
    Tanaibao,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
.bg {
}
.nav {
  position: absolute;
  z-index: 10;
}
.swiper {
  width: 100%;
  height: 900px;
  //top: 70px;
  position: absolute;
}
.ttitle {
  position: absolute;
  top: 1000px;
  width: 900px;
  left: 50%;
  transform: translateX(-50%);
  .tgongsi {
    font-size: 60px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .engs {
    top: 50px;
    color: rgba(0, 0, 0, 0.2);
    font-size: 40px;
    //color: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleX(0.7);
  }
}
.intro {
  position: absolute;
  top: 1180px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}
.ttitle1 {
  position: absolute;
  top: 1780px;
  width: 1300px;
  left: 50%;
  transform: translateX(-50%);
  .tgongsi {
    font-size: 60px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .engs {
    top: 50px;
    color: rgba(0, 0, 0, 0.2);
    font-size: 40px;
    //color: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleX(0.7);
  }
}
.tab {
  position: absolute;
  top: 1950px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}
.t2 {
  top: 2550px;
}
.footer {
  position: absolute;
  top: 3400px;
}
</style>